@charset "utf-8";
img{
    width: 100%;
}
/***************云***************/

.yun {
    .yun_01 {
        animation: yun_01 30s ease-in-out 1s infinite;
    }
    @-webkit-keyframes yun_01 {
        from {}
        25% {
            transform: translateY(-100px) rotate(360deg);
        }
        50% {
            transform: translateY(200px) translateX(150px) rotate(180deg)
        }
        75% {
            transform: translateX(200px) translateY(100px) rotate(120deg)
        }
        to {}
    }
    .yun_02 {
        animation: yun_02 15s linear 2s infinite;
    }
    @-webkit-keyframes yun_02 {
        from {}
        25% {
            transform: translateX(-60px)
        }
        50% {
            transform: translateY(50px) translateX(100px)
        }
        75% {
            transform: translateX(150px) translateY(100px)
        }
        to {}
    }
    .yun_03 {
        animation: yun_03 20s ease-in 2s infinite;
    }
    @-webkit-keyframes yun_03 {
        from {}
        25% {
            transform: translateY(50px)
        }
        50% {
            transform: translateX(25px)
        }
        to {}
    }   
    .yun_04 {
        animation: yun_04 20s ease-in 1s infinite;
    }
    @-webkit-keyframes yun_04 {
        from {}
        25% {
            transform: translateX(50px)
        }
        50% {
            transform: translateX(25px)
        }
        to {}
    }   
    .yun_05 {
        animation: yun_05 10s ease-in 5s infinite;
    }
    @-webkit-keyframes yun_05 {
        from {}
        25% {
            transform: translateX(50px) 
        }
        50% {
            transform: translateX(25px) 
        }
        to {}
    }  

}
/***************选项***************/
.xuanze:hover{
    animation: pulse 1s both ;
}
@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}
/***************音符***************/

.music {
    .yin_1 {
        animation: yin_1 6s linear infinite;
    }
    @keyframes yin_1 {
        from {}
        40% {
            transform: rotate(36deg);
        }
        80% {
            transform: rotate(360deg);
        }
        to {}
    }
    .yin_2 {
        animation: yin_2 5s linear infinite;
    }
    @keyframes yin_2 {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .yin_3 {
        animation: yin_3 4s linear infinite;
    }
    @keyframes yin_3 {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .yin_4 {
        animation: yin_4 4s linear infinite;
    }
    @keyframes yin_4 {
        from {
            transform: rotate(90deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    .yin_5 {
        animation: yin_5 7s linear infinite;
    }
    @keyframes yin_5 {
        from {
            transform: rotate(180deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
}


/***************狗***************/

.dog:hover {
    animation: shake 1s both infinite;
    transform-origin: center bottom;
}
@keyframes shake {
    from {
        transform: none;
    }
    15% {
        transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    }
    30% {
        transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    }
    45% {
        transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    }
    60% {
        transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    }
    75% {
        transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    }
    to {
        transform: none;
    }
}
/***************弹窗***************/
.tanchuang{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
        .dog_tc{
            margin: 0 auto;
            width: 26.3%;
            overflow: hidden;
            margin-top: 185px;
        }
        .jiantou{
            width: 20%;
            overflow: hidden;
            position: absolute;
            top: 80px;
            right: 66px;
        }
        .zi{
            font-size: 20px;
            color: #fff;
            font-family: "幼圆";
            padding: 10px 10px;
        }
        .qrcode{
            width: 49%;
            position: absolute;
            overflow: auto;  
            margin: auto;
            top: 50%; 
            left: 50%; 
            transform: translate(-50%,-50%);
        }
        .zi_s{
            text-align: center;
            font-size: 15px;
            color: #fff;
            font-family: "幼圆";
            padding: 10px 10px;
            top: 70%;
            left: 50%;
            transform: translate(-50%,-50%);
            position: absolute;
        }
}
input[type="checkbox"]{
    display: none;
}
input:checked~.tanchuang{
                display: block;
            }
 /***************气泡框***************/   
// 蓝色        
.blue{
    width: 70%;
    height: 28px;
    border-radius: 8px;
    position: relative;
    background: #75b9ff;
    text-align: center;
}
.blue:after{
    content: "";
    display: block;
    position: absolute;
    top:-10px;
    left: 120px;
    border-left: 5px solid transparent;
    border-bottom: 10px solid  #75b9ff;
    border-right: 13px solid transparent;
}
//红色
.red{
    width: 60%;
    height: 28px;
    border-radius: 8px;
    position: relative;
    background: #f346f3;
    padding: 0px 16px;
}
.red:after{
    content: "";
    display: block;
    position: absolute;
    top:3px;
    left: -9px;
    border-top: 10px solid transparent;
    border-bottom: 12px solid  transparent;
    border-right: 20px solid #f346f3;
}